<template>
  <div>
    <blackNav>我的请求</blackNav>
    <div style="width:100%;height:20px;"></div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="0"
    >
      <template v-if="bgData.length != 0">
        <section v-for="(item, index) in bgData" :key="index">
          <div
            class="task-item-c"
            @click="
              $router.push({
                path: '/myRequest',
                query: { id: item.id, type: item.type, status: item.r_status }
              })
            "
          >
            <div class="task-item-type">
              <div class="task-release-time">{{ item.create_time }}</div>
              <div class="task-release-type">{{ item.type }}</div>
            </div>
            <div class="task-item-m">
              <img :src="item.img_id ? item.img_id : tacitly" alt />
              <div class="task-item-m-r">
                <div>#{{ item.theme }}#</div>
                <div v-if="item.r_status === 1">
                  {{ endTime > 0 ? '邀请成功' : '任务确认成功' }}
                </div>
                <div v-else-if="item.r_status === 0">
                  对方等待回应
                </div>
                <div
                  v-else-if="item.r_status === 2 && item.type === '我的任务'"
                >
                  对方已拒绝
                </div>
                <div
                  v-else-if="item.r_status === 2 && item.type === '我的请求'"
                >
                  已拒绝
                </div>
                <div v-else>
                  已同意
                </div>
                <div
                  style="display:flex;"
                  v-if="
                    new Date(item.end_time).getTime() - new Date().getTime() <=
                      0 && item.r_status === 1
                  "
                >
                  <template v-if="endTime > 0">
                    <count-down
                      @time-end="timeEnd"
                      :endTime="item.end_time"
                    ></count-down>
                    <span>后任务确认成功</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </section>
      </template>
      <template v-if="bgData.length == 0">
        <div class="noneImg">
          <img src="../../../static/none.png" />
        </div>
      </template>
    </div>
    <div class="text" v-if="dataStart">没有更多数据了~</div>
  </div>
</template>

<script>
// import nav from '../../components/nav-black.vue'
const nav = () => import('../../components/nav-black.vue')
// import CountDown from '../../components/CountDown.vue'
const CountDown = () => import('../../components/CountDown.vue')

export default {
  data() {
    return {
      tacitly: require('../../../static/images/task/task_img.png'),
      page: 1,
      busy: false,
      bgData: [],
      dataStart: false,
      total: null,
      endTime: 1
    }
  },
  methods: {
    timeEnd(data) {
      this.endTime = data
    },
    loadMore() {
      this.busy = true
      if (this.page == 1) {
        this.getPageData()
      } else if (this.bgData.length != this.total) {
        this.getPageData()
      } else {
        this.dataStart = true
        this.busy = false
        return false
      }
    },
    getPageData() {
      this.$axios({
        method: 'post',
        url: 'Needloginaction/request',
        data: {
          page: this.page,
          pagesize: 10,
          token: sessionStorage.token
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.total = res.data.data.total
            if (res.data.data.length == 0) {
              this.dataStart = true
              return false
            } else {
              if (this.page == 1) {
                this.bgData = []
                let page = JSON.parse(JSON.stringify(res.data.data.list))
                this.bgData = page
              } else {
                res.data.data.list.forEach(item => {
                  this.bgData.push(item)
                })
              }
              this.page++
            }
          } else {
            alert('code')
          }
        })
        .catch(error => {
          console.log(error)
        })
      this.busy = false
    }
  },
  components: {
    blackNav: nav,
    CountDown
  }
}
</script>

<style scoped>
.noneImg {
  text-align: center;
}
.noneImg img {
  width: 50%;
}
.text {
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.task-header {
  width: 10rem;
  height: 1.1rem;
  position: relative;
  text-align: center;
  font-family: PingFang-SC-Regular;
  font-size: 0.44rem;
  color: #000000;
  line-height: 1.1rem;
}
.header-back {
  position: absolute;
  left: 0.23rem;
  top: 0.35rem;
  width: 0.33rem;
  height: 0.56rem;
}

.task-item-c {
  width: 8.93rem;
  height: 3.43rem;
  background-color: #323232;
  box-shadow: 0rem 0.03rem 0.12rem 0rem rgba(0, 0, 0, 0.25);
  border-radius: 0.2rem;
  margin: 0 auto 0.39rem auto;
  padding-top: 1px;
}
.task-item-type {
  width: 8.36rem;
  display: flex;
  justify-content: space-between;
  margin: 0.1rem auto;
}
.task-release-time {
  font-family: PingFangSC-Regular;
  font-size: 0.33rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #888888;
  height: 0.6rem;
  line-height: 0.6rem;
}
.task-release-type {
  width: 2.05rem;
  height: 0.6rem;
  background-color: #484848;
  border-radius: 0.24rem;
  opacity: 0.77;
  font-family: PingFang-SC-Regular;
  font-size: 0.37rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-item-m {
  display: flex;
  width: 8.36rem;
  margin: 0 auto;
  margin-top: 0.4rem;
}

.task-item-m img {
  width: 1.89rem;
  height: 1.88rem;
  margin-right: 0.4rem;
}

.task-item-m-r > div:first-child {
  font-family: KozGoPr6N-Regular;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: rgba(255, 255, 255, 0.9);
}
.task-item-m-r > div:nth-child(2) {
  font-family: KozGoPr6N-Regular;
  font-size: 0.41rem;
  height: 0.8rem;
  line-height: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}
.task-item-m-r > div:last-child {
  font-size: 0.41rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.59rem;
  letter-spacing: 0rem;
  color: rgba(255, 255, 255, 0.9);
}
</style>
